<template>
    <div class="payment-card-page">
        <!-- 页面头部 -->
        <TopNav
                title="联系人"
                :showBack="true"
                :showAdd="false"
        />

        <!-- 表单区域 -->
        <van-form
                label-align="top"
                @submit="handleSubmit"
                @failed="handleFormError"
                class="payment-form"
        >

            <!-- 联系人1 -->
            <van-field
                    v-model="formData.contactPerson1"
                    name="contactPerson1"
                    :rules="[{ required: true, message: '请输入联系人1' }]"
                    class="form-field"
                    placeholder="请输入联系人1"
            >
                <template #label>
                    联系人1<span class="required"> *</span>
                </template>
            </van-field>

            <!-- 与您的关系 -->
            <van-field
                    v-model="formData.cRelation1Text"
                    name="cRelation1Text"
                    placeholder="请选择与您的关系"
                    :rules="[{ required: true, message: '请选择与您的关系' }]"
                    readonly
                    is-link
                    clickable
                    @click="showCRelation1Picker = true"
                    class="form-field"
            >
                <template #label>
                    与您的关系<span class="required"> *</span>
                </template>
            </van-field>


            <!-- 手机号码 -->
            <van-field
                    v-model="formData.cPhone1"
                    name="cPhone1"
                    :rules="[
                        { required: true, message: '请输入手机号码' },
                        {
                            pattern: /^1[3-9]\d{9}$/,
                            message: '请输入有效的手机号码'
                        }
                    ]"
                    class="form-field"
                    placeholder="请输入手机号码"
            >
                <template #label>
                    手机号码<span class="required"> *</span>
                </template>
            </van-field>


            <!-- 联系人2 -->
            <van-field
                    v-model="formData.contactPerson2"
                    name="contactPerson2"
                    :rules="[{ required: true, message: '请输入联系人2' }]"
                    class="form-field"
                    placeholder="请输入联系人2"
            >
                <template #label>
                    联系人2<span class="required"> *</span>
                </template>
            </van-field>


            <!-- 与您的关系 -->
            <van-field
                    v-model="formData.cRelation2Text"
                    name="cRelation2Text"
                    placeholder="请选择与您的关系"
                    :rules="[{ required: true, message: '请选择与您的关系' }]"
                    readonly
                    is-link
                    clickable
                    @click="showCRelation2Picker = true"
                    class="form-field"
            >
                <template #label>
                    与您的关系<span class="required"> *</span>
                </template>
            </van-field>

            <!-- 手机号码 -->
            <van-field
                    v-model="formData.cPhone2"
                    name="cPhone2"
                    :rules="[
                        { required: true, message: '请输入手机号码' },
                        {
                            pattern: /^1[3-9]\d{9}$/,
                            message: '请输入有效的手机号码'
                        }
                    ]"
                    class="form-field"
                    placeholder="请输入手机号码"
            >
                <template #label>
                    手机号码<span class="required"> *</span>
                </template>
            </van-field>



            <!-- 提交按钮 -->
            <div class="form-actions">
                <MyButton text="下一步" />
            </div>
        </van-form>

        <van-action-sheet
                v-model:show="showCRelation1Picker"
                :actions="base.cRelation1s"
                @select="item => onSelect('cRelation1', item)"
        />

        <van-action-sheet
                v-model:show="showCRelation2Picker"
                :actions="base.cRelation2s"
                @select="item => onSelect('cRelation2', item)"
        />


    </div>
</template>

<script>
    import TopNav from "@/components/TopNav.vue";
    import MyButton from "@/components/MyButton.vue";
    import {addUserContactPerson} from '@/api/index.js'
    import {useRoute} from 'vue-router';

    export default {
        components: {
            TopNav, // 注册
            MyButton
        },

        data() {
            return {
                productId:'',
                showCRelation1Picker:false,
                showCRelation2Picker:false,
                base:{
                    cRelation1s:[
                        {name:'父亲', value:'10'},
                        {name:'母亲', value:'20'}
                    ],
                    cRelation2s:[
                        {name:'父母', value:'10'},
                        {name:'亲属', value:'20'},
                        {name:'朋友', value:'30'}
                    ]
                },
                // 初始表单数据
                initialFormData: {
                    contactPerson1: '',
                    cRelation1Text: '',
                    cPhone1: '',
                    contactPerson2: '',
                    cRelation2Text: '',
                    cPhone2: '',
                    cRelation1: '',
                    cRelation2: '',
                },
                formData: {}
            };
        },
        methods: {
            onSelect(type,item) {
                const map = {
                    cRelation1: { text: 'cRelation1Text', value: 'cRelation1', picker: 'showCRelation1Picker' },
                    cRelation2: { text: 'cRelation2Text', value: 'cRelation2', picker: 'showCRelation2Picker' }
                };

                const config = map[type];
                if (!config) return;

                this.formData[config.text] = item.name;
                this.formData[config.value] = item.value;

                this[config.picker] = false;
            },
            // 处理表单提交
            async handleSubmit() {
                let res = await addUserContactPerson(this.formData);
                if (res.code === 200) {
                    this.resetForm();
                    this.$router.push(`/profile/bankCard/AddBankCard?productId=${this.productId}`);
                }
            },
            resetForm() {
                this.formData = { ...this.initialFormData };
            },

        },
        mounted() {
            const route = useRoute();
            let productId = route.query.productId;
            this.productId = productId;
            this.resetForm();
        }
    };
</script>

<style scoped>
    .payment-card-page {
        background-color: #f5f5f5;
        min-height: 100vh;
    }

    .page-header {
        background-color: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .payment-form {
        background-color: #ffffff;
        margin-top: 10px;
        padding: 0 16px;
    }

    .card-type-group {
        display: flex;
        padding: 16px 0;
        border-bottom: 10px solid #eee;
    }

    .card-type-item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .card-icon {
        margin-right: 8px;
        color: #1989fa;
    }

    .form-field {
        border-bottom: 1px solid #eee;
    }

    .form-actions {
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }


    .cancel-btn {
        background-color: transparent;
        color: #666;
    }

    .bank-picker-popup {
        width: 100%;
    }

    .required {
        color: red;
        margin-right: 4px;
    }

    .color-btn {
        background: linear-gradient(90deg, #407fff, #1a60d0);
    }

    /* 确保光标在移动端居中 */
    .van-search__field {
        height: 36px;
        line-height: 36px;
    }

    .van-search__input {
        height: 100%;
        line-height: 36px;
        font-size: 16px;
        padding: 0 10px;
    }

    .identity-info-page {
        padding-top: 16px;
        background-color: #fff;
        min-height: 100vh;
        box-sizing: border-box;
    }

    /* 证件占位容器 */
    .card-container {
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        padding: 16px;
    }

    .card-item {
        width: 50%;
        padding: 3px;
    }

    .card-avatar, .card-nation {
        border-radius: 4px;
        min-height: 120px;
    }

    .upload-box {
        border: 2px dashed #ccc; /* 虚线边框 */
        border-radius: 8px; /* 圆角，可选 */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
        box-sizing: border-box;
        cursor: pointer;
        background-color: #fff; /* 背景色 */
    }

    .upload-box img {
        max-width: 80%; /* 图片最大宽度 */
        max-height: 70%; /* 图片最大高度 */
        object-fit: contain;
    }

    .upload-text {
        margin-top: 8px;
        font-size: 14px;
        color: #999;
    }


</style>
